<template>
    <div>
        <div class="main-head has-radios flex-between container-fluid">
            <div class="title">
                <h1>{{ navTitle }}</h1>
                <!--$t('pro.public.footer.PrivacyPolicy') $t('pro.billing.title') $t('pro.settings.invoicingTemplate')-->
            </div>
            <div>
                <a-radio-group  v-model="navValue" buttonStyle="solid" @change="handleNavChange">
                        <a-radio-button
                                v-for="(item, index) in $t('pro.settings.links')"
                                :key="index"
                                :value="item.path"
                        >{{ item.name }}</a-radio-button>
                </a-radio-group>
            </div>
        </div>
        <div class="content container-fluid">
            <div class="breadcrumb">
                <a-breadcrumb :routes="getRoutes">
                    <template slot="itemRender" slot-scope="{route, params, routes}">
                        <span v-if="getRoutes.indexOf(route) === getRoutes.length - 1">
                           {{route.name}}
                        </span>
                        <router-link v-else :to="route.path">
                           {{route.name}}
                        </router-link>
                    </template>
                </a-breadcrumb>
            </div>
           <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                navTitle: this.$t('pro.public.footer.Terms'),
                navValue: '/admin/sitesettings/termsofuse',
                routes: [],
                routesArr: [],
            }
        },
        methods: {
            handleNavChange() {
                this.$router.push({ path: this.navValue});
                let item = this.$t('pro.settings.links').find(item => {
                    return item.path ==this.navValue
                }) || {};
                this.navTitle = item.name;

                console.log(item);
                this.routes.pop();
                this.routes.push(item);

            }
        },
        computed: {
            getRoutes() {
                this.routes = this.$t('pro.settings.routes');
                return this.routes
            }
        }
    }
</script>

